<script setup>
import { ref } from 'vue'

const remark = ref('')
const payAmount = ref(1000)
const overdueDays = ref(100)

const handlePay = () => {
  if (!remark.value) {
    uni.showToast({
      title: '请输入备注',
      icon: 'none'
    })
    return
  }
  uni.showLoading({
    title: '支付中...'
  })
  // TODO: 调用支付接口
}
</script>

<template>
  <view class="repayment">
    <z-nav-bar title="还款" leftIcon="@/static/icon/back.png"></z-nav-bar>

    <view class="container">
      <!-- 支付方式 -->
      <view class="pay-method">
        <view class="title">
          <text>
            选择还款方式 :
          </text>
          <text>微信支付</text>
         </view>
      </view>

      <!-- 金额信息 -->
      <view class="amount-box">
        <view class="amount">
          <text>待还款金额</text>
          <text class="money">{{payAmount}}</text>
          <text>元</text>
        </view>
        <view class="overdue">
          <text>已逾期</text>
          <text class="days">{{overdueDays}}</text>
          <text>天</text>
        </view>
      </view>

      <!-- 备注 -->
      <view class="remark">
        <view class="title">
          <text class="required">*</text>
          <text>备注:</text>
        </view>
        <textarea
          v-model="remark"
          class="input"
          placeholder="内容"
          placeholder-style="color: #999"
        />
      </view>

      <!-- 支付按钮 -->
      <button class="pay-btn" @tap="handlePay">支付</button>

      <!-- 注意事项 -->
      <view class="notice">
        <text class="title">注意</text>
        <text class="content">要注意自己的账户信息填写无误，如果你的银行卡失效或者卡号填错...</text>
      </view>
    </view>
  </view>

  <view class="announcement">
    <z-nav-bar title="公告信息" leftIcon="@/static/icon/back.png"></z-nav-bar>

    <view class="announcement-list">
      <view class="announcement-item" v-for="item in announcements" :key="item.id">
        <image class="announcement-image" :src="item.image" mode="aspectFit"></image>
        <view class="announcement-content">
          <text class="announcement-title">{{item.title}}</text>
          <text class="announcement-description">{{item.description}}</text>
          <text class="announcement-date">有效截止日期：{{item.date}}</text>
        </view>
      </view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.repayment {
  min-height: 100vh;
  background: #f5f5f5;

  .container {
    padding: 24rpx;
  }

  .pay-method {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .title {
      font-size: 28rpx;
      color: #333;
      margin-bottom: 24rpx;
    }

    .method-item {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .left {
        display: flex;
        align-items: center;

        .pay-icon {
          width: 44rpx;
          height: 44rpx;
          margin-right: 12rpx;
        }

        text {
          font-size: 28rpx;
          color: #333;
        }
      }

      .arrow {
        width: 32rpx;
        height: 32rpx;
      }
    }
  }

  .amount-box {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .amount {
      margin-bottom: 16rpx;

      text {
        font-size: 28rpx;
        color: #666;
      }

      .money {
        font-size: 40rpx;
        color: #333;
        font-weight: bold;
        margin: 0 8rpx;
      }
    }

    .overdue {
      text {
        font-size: 28rpx;
        color: #ff4d4f;
      }

      .days {
        font-size: 32rpx;
        margin: 0 8rpx;
      }
    }
  }

  .remark {
    background: #fff;
    border-radius: 16rpx;
    padding: 24rpx;
    margin-bottom: 24rpx;

    .title {
      margin-bottom: 16rpx;

      .required {
        color: #ff4d4f;
        margin-right: 4rpx;
      }

      text {
        font-size: 28rpx;
        color: #333;
      }
    }

    .input {
      width: 100%;
      height: 160rpx;
      background: #f8f8f8;
      border-radius: 8rpx;
      padding: 16rpx;
      font-size: 28rpx;
      box-sizing: border-box;
    }
  }

  .pay-btn {
    width: 100%;
    height: 88rpx;
    line-height: 88rpx;
    background: #2B3139;
    color: #fff;
    font-size: 32rpx;
    border-radius: 8rpx;
    margin: 48rpx 0;
  }

  .notice {
    .title {
      display: block;
      font-size: 28rpx;
      color: #999;
      margin-bottom: 8rpx;
    }

    .content {
      font-size: 24rpx;
      color: #999;
      line-height: 1.6;
    }
  }
}

.announcement {
  background: #f5f5f5;
  min-height: 100vh;

  .announcement-list {
    padding: 16rpx;
  }

  .announcement-item {
    display: flex;
    background: #fff;
    border-radius: 16rpx;
    padding: 16rpx;
    margin-bottom: 16rpx;
    box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.1);

    .announcement-image {
      width: 80rpx;
      height: 80rpx;
      border-radius: 8rpx;
      margin-right: 16rpx;
    }

    .announcement-content {
      flex: 1;

      .announcement-title {
        font-size: 28rpx;
        font-weight: bold;
        color: #333;
        margin-bottom: 8rpx;
      }

      .announcement-description {
        font-size: 24rpx;
        color: #666;
        line-height: 1.5;
        margin-bottom: 8rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
      }

      .announcement-date {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
}
</style>
